<template>
  <div class="main">
    <div class="backImg"></div>
    <div class="change-password">
      <div class="title">
        <span>修改密码</span>
      </div>
      <div class="list">
        <el-input
          prefix-icon="el-icon-user"
          placeholder="请输入账号"
          v-model="changePasswordForm.username"
        ></el-input>
      </div>
      <div class="list">
        <el-input
          prefix-icon="el-icon-lock"
          placeholder="请输入旧密码"
          type="password"
          v-model="changePasswordForm.oldPassword"
        ></el-input>
      </div>
      <div class="list">
        <el-input
          prefix-icon="el-icon-lock"
          placeholder="请输入新密码"
          type="password"
          v-model="changePasswordForm.newPassword"
        ></el-input>
      </div>
      <div class="list">
        <el-input
          prefix-icon="el-icon-lock"
          placeholder="请确认新密码"
          type="password"
          v-model="changePasswordForm.confirmPassword"
        ></el-input>
      </div>
      <div class="btn">
        <button @click="changePasswordClick">提交</button>
        <router-link to="/"  class="login-link">
            返回登录
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import {ElMessage} from 'element-plus'
export default {
  data() {
    return {
      changePasswordForm: {
        username: "",
        oldPassword: "",
        newPassword: "",
        confirmPassword: ""
      }
    };
  },
  methods: {
    changePasswordClick() {
      console.log('修改密码信息：', this.changePasswordForm);
      // 修改密码的逻辑
      axios.post("http://localhost:8080/user/changePassword",this.changePasswordForm).then(res =>{
        if(res.data == "修改成功"){
                    ElMessage({
      message: res.data,
      type: 'success',
      duration: 2000
    })
                }else{
                    ElMessage({
      message: res.data,
      type: 'error',
      duration: 2000
    })
                }

            })
        }
  }
};
</script>

<style scoped>
.backImg {
  background: url("../img/back.jpg");
  background-size: cover;
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.change-password {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid #ccc;
  background: #fff;
  width: 20%;
  padding: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

.change-password .title {
  text-align: center;
  padding-bottom: 15px;
}

.change-password .title span {
  font-size: 24px;
  color: #333;
}

.change-password .list {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.change-password .list .el-input {
  margin-right: 10px;
  flex-grow: 1;
}

.change-password .btn {
  display: flex;
  justify-content: space-between;
  padding-top: 20px;
}

.change-password .btn button {
  font-size: 14px;
  color: #fff;
  background: #46b5ff;
  border: none;
  border-radius: 4px;
  padding: 8px 20px;
  cursor: pointer;
}

.change-password .login-link {
  font-size: 14px;
  color: #46b5ff;
  text-decoration: none;
  cursor: pointer;
}
</style>